<template>
  <div class="search">
    <div class="content">
      <div class="placeholder">{{placeholder}}</div>
      <i class="iconfont icon-search"></i>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  name: 'dx-search-bar',
  props: {
    placeholder: {
      type: String,
      default: '请输入'
    }
  }
};
</script>

<style lang="stylus" scoped>
  .search
    padding : 14px 20px
    width : 100%
    height : 88px
    background : #eee

  .content
    display : flex
    align-items : center
    padding : 0 20px
    width : 100%
    height : 100%
    background : #fff
    border-radius : 6px

  .placeholder
    flex : 1
    font-size : 26px
    color : #999

  .iconfont
    font-size : 36px
    color : #aaa

</style>
